<!-- 订单-预约 -->
<template>
	<view class="page-box">
		<view class="place-order-box" :style="'padding:' + (isInfo ? '32rpx' : '')">
			<view class="place-order-box-t" style="margin-bottom: 32rpx;">
				<image @tap="handleImg()" class="image" mode="aspectFill" :src="artistInfo.coverUrl">
				</image>
				<view class="r-box">
					<view class="box-t" style="margin-top: 20rpx;">
						<text>{{artistInfo.stageName}}</text>
						<view>
							<image src="/static/images/locationIcon.png"></image>
							<text>{{artistInfo.cityName}}</text>
						</view>
					</view>
					<view class="box-b" style="margin-top: 8rpx;">
						{{artistInfo.signature}}
					</view>
				</view>
			</view>

			<view class="main-box" v-if="!isInfo">
				<view class="main-box-t">
					<text style="color: #0F0F0F;font-size: 32rpx;font-weight: bold;">服务时间</text>
					<view>
						<text v-if="!isInfo"
							style="color: #0F0F0F;font-size: 24rpx;font-weight: bold;">{{`${artistInfo.serviceStartTime ? artistInfo.serviceStartTime.slice(0, artistInfo.serviceStartTime.length - 3) :''}~${timeInit}`}}</text>
						<text v-else
							style="color: #0F0F0F;font-size: 24rpx;font-weight: bold;">{{`${dayjs(artistInfo.subscribeStartTime).format('YYYY年MM月DD日 HH:mm')}~${dayjs(artistInfo.subscribeEndTime).format('HH:mm')}`}}</text>
						<!-- <image style="margin-left: 8rpx;width: 20rpx;height: 20rpx;" src="/static/images/rightIcon1.png"-->
						</image>
					</view>
				</view>
			</view>


			<view class="main-box" v-if="isInfo">
				<view class="form-box">
					<view class="form-item">
						<text>服务开始时间</text>
						<view class="text-box">
							<text
								class="text">{{artistInfo.serviceStartTime ? dayjs(artistInfo.serviceStartTime).format('YYYY年MM月DD日 HH:mm') : '暂未开始'}}</text>
						</view>
					</view>
					<view class="form-item">
						<text>服务结束时间</text>
						<view class="text-box">
							<text
								class="text">{{artistInfo.serviceEndTime ? dayjs(artistInfo.serviceEndTime).format('YYYY年MM月DD日 HH:mm') : '暂未结束'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="main-box">
				<view class="form-box">
					<template v-if="isInfo">
						<view class="form-item">
							<text>预约时间</text>
							<view class="text-box">
								<text
									class="text">{{formData.subscribeStartTime ? dayjs(formData.subscribeStartTime).format('YYYY年MM月DD日 HH:mm') : '请选择预约开始日期'}}</text>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="form-item">
							<text>预约日期</text>
							<view class="text-box" @tap="() => dateShow =!isInfo">
								<!-- <text
                  class="text">{{artistInfo.orderStartDateTime ? dayjs(artistInfo.orderStartDateTime).format('YYYY年MM月DD日') : '请选择预约开始日期'}}</text> -->
								<text class="text">{{datePickerData ? datePickerData : '请选择预约开始日期'}}</text>
								<image v-if="!isInfo" style="width: 20rpx;height: 20rpx;"
									src="/static/images/rightIcon.png">
								</image>
							</view>
						</view>
						<view class="form-item">
							<text>预约时间</text>
							<view class="text-box" @tap="() => timeShow =!isInfo">
								<!-- <text
                  class="text">{{artistInfo.orderStartDateTime ? dayjs(artistInfo.orderStartDateTime).format('HH:mm') : '请选择预约开始时间'}}</text> -->
								<text class="text">{{timePickerData ? timePickerData : '请选择预约开始时间'}}</text>
								<image v-if="!isInfo" style="width: 20rpx;height: 20rpx;"
									src="/static/images/rightIcon.png">
								</image>
							</view>
						</view>
					</template>
					<view class="form-item">
						<text>预约时长</text>
						<view class="text-box" @tap="() => show2 =!isInfo">
							<text v-if="!isInfo"
								class="text">{{formData.duration ? hourList.find(i => i.value === formData.duration).name : '请选择预约时长'}}</text>

							<text v-else class="text">{{formData.duration + '小时'}}</text>
							<image v-if="!isInfo" style="width: 20rpx;height: 20rpx;" src="/static/images/rightIcon.png"
								</image>
						</view>
					</view>
					<view class="form-item">
						<text>预约项目</text>
						<view class="text-box" @tap="() => show3 =!isInfo">
							<text class="text">{{formData.categoryName || '请选择预约项目'}}</text>
							<image v-if="!isInfo" style="width: 20rpx;height: 20rpx;"
								src="/static/images/rightIcon.png">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="main-box">
				<view class="form-box">
					<view class="form-item">
						<text>称呼</text>
						<view>
							<uni-easyinput v-if="!isInfo" v-model.trim="formData.salutation" :inputBorder="false"
								placeholder="请输入称呼" placeholderStyle="color:#8C8A8A;" :styles="{color: '#8C8A8A'}"
								:maxlength="6"></uni-easyinput>
							<text v-else class="text">{{formData.salutation}}</text>
						</view>
					</view>
					<template v-if="!isInfo">
						<view class="form-item">
							<text>手机</text>
							<view class="xxxxxx">
								<uni-easyinput v-if="!isInfo" v-model.trim="formData.contactPhone" type="number"
									:maxlength=11 :inputBorder="false" placeholder="请输入联系手机号"
									:styles="{color: '#8C8A8A'}" placeholderStyle="color:#8C8A8A;"></uni-easyinput>
								<text v-else class="text">{{formData.contactPhone}}</text>
								<view v-if="formData.contactPhone !== userInfo.phone" class="btn" @tap="handleSms()">
									{{sss > 0 ? `${sss}秒`:'获取验证码'}}
								</view>
							</view>
						</view>
					</template>
					<template>
						<view class="form-item" v-if="!userInfo.artistId && formData.managerPhone">
							<text>手机</text>
							<view>
								<uni-easyinput v-if="!isInfo" v-model.trim="formData.contactPhone" type="number"
									:maxlength=11 :inputBorder="false" placeholder="请输入联系手机号"
									:styles="{color: '#8C8A8A'}" placeholderStyle="color:#8C8A8A;"></uni-easyinput>

								<text v-else class="text">{{formData.contactPhone}}</text>
							</view>
						</view>
					</template>
					<view class="form-item" v-if="formData.contactPhone !== userInfo.phone && !isInfo">
						<text>验证码</text>
						<view>
							<uni-easyinput v-if="!isInfo" v-model.trim="formData.checkCode" type="number" :maxlength=4
								:inputBorder="false" placeholder="请输入验证码" :styles="{color: '#8C8A8A'}"
								placeholderStyle="color:#8C8A8A;"></uni-easyinput>
						</view>
					</view>
					<view class="form-item">
						<text>预约城市</text>
						<view class="text-box">
							<!-- @tap="() => show4 =true" -->
							<text class="text">{{formData.cityName || '请选择预约城市'}}</text>
							<image style="width: 20rpx;height: 20rpx;" src="/static/images/rightIcon.png">
							</image>
						</view>
						<!-- <view class="text-box"> -->
						<!-- <text class="text">{{`(限定)${formData.cityName}`}}</text> -->
						<!-- <image style="width: 20rpx;height: 20rpx;" src="/static/images/rightIcon.png"->
						<!-- </image>
          </view> -->
					</view>
					<view class="form-item">
						<text>见面地址</text>
						<view>
							<!-- <liu-chooseAddress v-if="!isInfo" ref="liuChooseAddress"
                @submit="submitAddress">
              </liu-chooseAddress> -->
							<liu-chooseAddress v-if="!isInfo" :cityCode="formData.cityCode" ref="liuChooseAddress"
								@submit="submitAddress">
							</liu-chooseAddress>
							<text v-else class="text">{{formData.address}}</text>
						</view>
					</view>

					<!-- 预约简述注释	 -->
					<!-- <view class="form-item"
						v-if="!isInfo">
						<text>预约简述</text>
						<view>
							<textarea v-if="!isInfo"
								maxlength="50"
								:auto-blur="true"
								:value="formData.remark"
								placeholder="请简要描述预约内容"
								placeholder-style="color: #8C8A8A;font-size: 28rpx;font-weight: 400">
							</textarea>
							<text v-else
								class="text">{{formData.remark}}</text>
						</view>
					</view>
					<view class="form-item"
						v-if="isInfo && formData.remark">
						<text>预约简述</text>
						<view>
							<textarea v-if="!isInfo"
								maxlength="50"
								:auto-blur="true"
								:value="formData.remark"
								placeholder="请简要描述预约内容"
								placeholder-style="color: #8C8A8A;font-size: 28rpx;font-weight: 400">
							</textarea>
							<text v-else
								class="text">{{formData.remark}}</text>
						</view>
					</view> -->

					<view class="form-item">
						<text>推荐人ID</text>

						<view>
							<input class="refereeIdInput" type="digit" placeholder="请输入推荐人id(非必填)"
								@input="setRefereeIdChange" />
						</view>
					</view>


				</view>
			</view>

			<view class="main-box">
				<view class="form-box">
					<text class="title">订单明细</text>
					<view class="btm-row">
						<text>出行费用</text>
						<text>¥{{artistInfo.travelExpense || '0.00'}}</text>
					</view>
					<view class="btm-row">
						<text>服务费用</text>
						<text>¥{{artistInfo.serviceAmount || '0.00'}}</text>
					</view>
					<view v-if="!isInfo " class="btm-row" @tap="handleCoupon()">
						<text>优惠券</text>
						<view v-if="couponConsumeId && artistInfo.discountAmount" class="coupon">
							<view class="coupon-name">
								<text>{{artistInfo.couponName}}</text>
							</view>
							<view class="coupon-money">
								<text>-¥{{artistInfo.discountAmount || '0.00'}}</text>
							</view>
							<!-- <text>{{artistInfo.couponName}}</text>
            <text>-¥{{artistInfo.discountAmount || '0.00'}}</text> -->
						</view>
						<view v-else class="coupon-check">
							<text>选择优惠券</text>
							<image src="/static/images/rightIcon.png"></image>
						</view>
					</view>
					
					<view v-else-if="isInfo && artistInfo.discountAmount" class="btm-row">
						<text>优惠券</text>
						<view class="coupon">
							<view class="coupon-name">
								<text>{{artistInfo.couponName}}</text>
							</view>
							<view class="coupon-money">
								<text>-¥{{artistInfo.discountAmount || '0.00'}}</text>
							</view>
							<!-- <text>{{artistInfo.couponName}}</text>
            <text>-¥{{artistInfo.discountAmount || '0.00'}}</text> -->
						</view>
					</view>

					<!-- <view class="btm-row" v-if="artistInfo.couponName && artistInfo.discountAmount">
            <text>优惠券</text>
            <view class="coupon-name">
                <text>{{artistInfo.couponName}}</text>
            </view>
            <text>-¥{{artistInfo.discountAmount || '0.00'}}</text>
          </view> -->
					<view class="btm-row">
						<text>合计</text>
						<text style="font-size: 60rpx;">¥{{artistInfo.payAmount || '0.00'}}</text>
					</view>
				</view>
			</view>

			<view class="main-box" v-if="!isInfo">
				<view class="form-box">
					<view class="">
						<radio-group @change="radioChange" class="recharg-box">
							<label v-for="(item, index) in rechargTypeList" :key="item.code" class="recharg-box-c">
								<image :src="item.img"></image>
								<text class="item">{{item.type}}</text>
								<radio class="radio" color="#F7A254" :value="item.code" :checked="index === current" />
								<view class="type-bord" v-if="index == 0"></view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="btn-box" v-if="!isInfo" @tap="handleSubmit()">提交</view>
			<!-- <view class="btn-box" v-if="!isInfo" @tap="handleSubmit()">提交</view> -->

			<!-- 时间组件 -->
			<PlaceOrderTime ref="placeOrderTime" :dateShow="dateShow" :timeShow="timeShow" :pageData="childPageData"
				@setDateShow="setDateShow" @setTimeShow="setTimeShow" @setTimeData="setTimeData"></PlaceOrderTime>




			<u-action-sheet round=40 @select="handleSelect($event,'duration')" :actions="hourList" cancelText="取消"
				:closeOnClickOverlay="true" :safeAreaInsetBottom="true" :closeOnClickAction="true" :show="show2"
				@close="show2 = false">
			</u-action-sheet>

			<!-- 预约项目 -->
			<u-picker :show="show3" itemHeight=60 :defaultIndex="defaultIndex3" :closeOnClickOverlay="true"
				:columns="artistInfo.cates" keyName="title" @close="show3 = false" @cancel="show3 = false"
				@confirm="handleCategoryId"></u-picker>

			<u-picker :show="show4" itemHeight=60 :defaultIndex="defaultIndex4" :closeOnClickOverlay="true"
				:columns="[AreaList]" keyName="name" @close="show4 = false" @cancel="show4 = false"
				@confirm="handleCityCode">
			</u-picker>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import validation from '@/utils/test'
	import cookie from '@/utils/cookie.js'
	import {
		postArtistDetail,
		getArtistSubscribe, // 获取艺人服务时间
		getDurationDownBox,
		getCateList,
		postServicePriceQuery,
		postAllowCouponQuery
	} from '@/api/artist.js'
	import {
		postOrderCreate,
		getOrder,
		postPayOfBalance
	} from '@/api/order.js'

	import {
		getCreateCode,
	} from '@/api/user.js'

	// 页面组件
	import PlaceOrderTime from './components/placeOrderTime.vue'

	// 公共方法
	import {
		wxPaymentWeiXin
	} from '@/utils/wx/wxPublick-weixin.js'
	import {
		wxPayment
	} from '@/utils/wx/wxPublick-h5.js'


	export default {
		name: 'placeOrder',
		components: {
			PlaceOrderTime
		},

		data() {
			return {
				refereeId: '', // 推荐人id

				// 时间选择器相关
				datePickerData: '', //预约日期选择数据
				timePickerData: '', // 预约时间选择数据
				// 传入子组件的数据
				childPageData: {
					serviceStartTime: '', //服务开始时间
					serviceEndTime: '' // 服务结束时间

				},
				dateShow: false, // 时间显隐
				timeShow: false, // 时分显隐
				dateTimeData: '', // 选择的时间



				isInfo: 0,
				isRest: 0,
				id: '',
				dateData: '',
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				defaultIndex1: [2, 2],
				defaultIndex5: [0, 0, 5],
				defaultIndex3: [0],
				defaultIndex4: [0],
				subscribeStartTime1: '',
				couponConsumeId: null,
				formData: {
					address: '',
					cityCode: '',
					cityName: '',
					artistId: '',
					categoryId: null,
					categoryName: '',
					serviceStartTime: '',
					serviceEndTime: '',
					remark: '',
					salutation: '',
					duration: null,
					payType: null,
					subscribeStartTime1: '',
					subscribeStartTime2: '',
					subscribeStartTime: '',
					contactPhone: '',
					checkCode: '',
					couponConsumeId: null,
					unit: '',
				},
				artistInfo: {
					qualificationsVos: [],
					guaranteeVos: [],
					cates: [],
					cityName: '',
					isFollow: false,
					travelExpense: null,
					serviceAmount: null,
					payAmount: null,
					couponName: '',
					subscribeEndTime: '',
					subscribeStartTime: '',
					serviceEndTime: '',
					serviceStartTime: ''
				},
				couponList: [],
				subscribeHours: [],
				hourList: [{
					name: '3小时',
					value: 3
				}, {
					name: '4小时',
					value: 4
				}, {
					name: '5小时',
					value: 5
				}, {
					name: '6小时',
					value: 6
				}, {
					name: '7小时',
					value: 7
				}, {
					name: '8小时',
					value: 8
				}],
				diamondList: [],
				sss: 0,
				disableSubmit: false,
				codeInterval: null,
				isSms: false,

				rechargType: 'wx',
				isShowPop: false,
				rechargTypeList: [{
					type: '微信',
					code: 'wx',
					img: '../../static/images/wxPay.png'
				}, {
					type: '余额',
					code: 'balance',
					img: '../../static/images/balancePay.png'
				}],
				current: 0
			};
		},



		computed: {
			...mapGetters(['AreaList', 'userInfo', 'locationInfo']),
			// minDate() {
			// 	console.log(Number(this.subscribeStartTime1), '111111111111111111111');
			// 	return Number(this.subscribeStartTime1)
			// },
			// maxDate() {
			// 	return Number(new Date()) + 86400000 * 30
			// },
			// minHour() {
			// 	const minHour = this.artistInfo.serviceStartTime ? (dayjs(dayjs(new Date()).format('YYYY/MM/DD ') + this
			// 		.artistInfo.serviceStartTime).format('HH')) - 0 : 0
			// 	return minHour
			// },
			// minMinute() {
			// 	const minMinute = this.artistInfo.serviceStartTime ? (dayjs(dayjs(new Date()).format('YYYY/MM/DD ') + this
			// 		.artistInfo.serviceStartTime).format('mm')) - 0 : 0
			// 	return minMinute
			// },
			// maxHour() {
			// 	const maxHour = this.artistInfo.serviceEndTime ? (dayjs(dayjs(new Date()).format('YYYY/MM/DD ') + this
			// 		.artistInfo.serviceEndTime).format('HH') === '00' ? 23 : dayjs(dayjs(new Date()).format(
			// 			'YYYY/MM/DD') + ' ' + this
			// 		.artistInfo.serviceEndTime).format('HH') - 0) : 23
			// 	return maxHour
			// },
			// maxMinute() {
			// 	const maxMinute = this.artistInfo.serviceEndTime ? (dayjs(dayjs(new Date()).format('YYYY/MM/DD ') + this
			// 		.artistInfo.serviceEndTime).format('mm') === '00' ? 59 : dayjs(dayjs(new Date()).format(
			// 			'YYYY/MM/DD') + ' ' + this
			// 		.artistInfo.serviceEndTime).format('mm')) - 0 : 59
			// 	return maxMinute

			// },

			timeInit() {
				let str = ''

				if (this.artistInfo.serviceStartTime && this.artistInfo.serviceEndTime) {

					let start = this.artistInfo.serviceStartTime.split(":")
					let end = this.artistInfo.serviceEndTime.split(":")

					if (start[0] > end[0]) {
						str = '次日' + this.artistInfo.serviceEndTime.slice(0, this.artistInfo.serviceEndTime.length - 3)
					} else {
						str = this.artistInfo.serviceEndTime.slice(0, this.artistInfo.serviceEndTime.length - 3)
					}

				} else {
					str = ''
				}

				return str;
			}

		},

		onLoad(e) {
			const {
				id,
				isInfo = '0',
				artistId,
				categoryId,
				duration,
				address,
				cityCode,
				cityName,
				contactPhone,
				isRest = '0',
				unit
			} = e
			this.id = id
			this.isInfo = Number(isInfo) === 1
			this.isRest = Number(isRest) === 1

			this.formData.unit = unit
			this.formData.artistId = Number(artistId)


			if (this.isRest) {
				this.formData.contactPhone = contactPhone
			}
			if (this.isInfo) {
				return this.handleInit({})
			}
			Object.assign(this.formData, e)
			this.formData.categoryId = (categoryId ? Number(categoryId) : null)
			this.handleInit({
				duration: Number(duration),
				address,
				cityCode,
				cityName
			})
		},
		onShow() {

			if (!this.isInfo) {
				this.couponConsumeId = this.consumeId
				this.formData.couponConsumeId = this.consumeId
				this.servicePriceQuery()
				if (this.couponConsumeId && this.couponList.length && this.couponList.length > 0) {
					this.formData.couponConsumeId = this.couponConsumeId
					this.artistInfo.couponName = this.couponList.filter(c => c.id == this.couponConsumeId)[0].couponName
				}
			}

			if (this.isRest) return
			if (cookie.get('placeOrder')) {
				// console.log(cookie.get('placeOrder'))
				this.formData.contactPhone = this.userInfo.phone
				cookie.remove('placeOrder')
			}


		},
		mounted() {},
		watch: {

			'artistInfo.serviceStartTime'(e) {
				//获取服务时间并初始化
				this.$refs.placeOrderTime.init()

				this.childPageData.serviceStartTime = this.artistInfo.serviceStartTime
				this.childPageData.serviceEndTime = this.artistInfo.serviceEndTime
			},


			'formData.unit'(n, o) {
				if (n === '天8时') {
					this.formData.duration = 1
					this.hourList = [{
						name: '1天/8小时',
						value: 1
					}, {
						name: '2天/8小时',
						value: 2
					}, {
						name: '3天/8小时',
						value: 3
					}, {
						name: '4天/8小时',
						value: 4
					}]
				} else if (n === '天') {
					this.formData.duration = 1
					this.hourList = [{
						name: '1天',
						value: 1
					}, {
						name: '2天',
						value: 2
					}, {
						name: '3天',
						value: 3
					}, {
						name: '4天',
						value: 4
					}, {
						name: '5天',
						value: 5
					}]
				} else {
					// if (o === 8) {
					this.formData.duration = 3
					this.hourList = [{
						name: '3小时',
						value: 3
					}, {
						name: '4小时',
						value: 4
					}, {
						name: '5小时',
						value: 5
					}, {
						name: '6小时',
						value: 6
					}, {
						name: '7小时',
						value: 7
					}, {
						name: '8小时',
						value: 8
					}]
				}
				// this.servicePriceQuery()
			},
			'formData.duration'(n, o) {
				this.servicePriceQuery()
			},
			'formData.cityCode'(n, o) {
				this.servicePriceQuery()
			}
		},
		methods: {
			dayjs,

			/**
			 * 修改推荐人id
			 */
			setRefereeIdChange(e) {
				this.refereeId = Number(e.target.value)
				console.log(this.refereeId, '推荐人id修改');
			},


			// 时间选择子组件的方法
			/**
			 * 修改date的显示隐藏
			 */
			setDateShow() {
				this.dateShow = false
			},
			/**
			 * 修改time的显示隐藏
			 */
			setTimeShow() {
				this.timeShow = false
			},

			/**
			 * 设置时间值
			 */
			setTimeData(val) {
				this.datePickerData = val.split(' ')[0] //预约日期选择数据
				this.timePickerData = val.split(' ')[1] // 预约时间选择数据

				this.formData.subscribeStartTime1 = new Date(val).getTime()
				this.formData.subscribeStartTime2 = new Date(val).getTime()
				this.dateTimeData = val

				console.log(val, '设置时间至', new Date(val).getTime());
			},




			handleImg() {
				if (!this.isInfo) return
				this.handleTo(
					`/pages/artist/info?id=${this.formData.artistId}${this.formData.categoryId? `&cateId=${this.formData.categoryId}` : ''}`
				)
			},
			handleCoupon() {
				// if (!this.isInfo) return
				this.handleTo(
					`/pages/wallet/useCoupon?id=${this.formData.artistId}${this.formData.categoryId? `&cateId=${this.formData.categoryId}` : ''}${this.formData.couponConsumeId? `&couponConsumeId=${this.formData.couponConsumeId}` : ''}`
				)
			},
			handleTo(url) {
				uni.navigateTo({
					url
				})
			},
			handleSms() {
				if (this.sss > 0) return
				if (!this.formData.contactPhone) return uni.showToast({
					duration: 5000,
					title: '请输入联系手机号',
					icon: 'none'
				})
				else if (!validation.mobile(this.formData.contactPhone)) return uni.showToast({
					duration: 5000,
					title: '请输入正确的手机号码',
					icon: 'none'
				})

				getCreateCode(this.formData.contactPhone, {
					type: 2
				}).then((res) => {
					if (res.code !== 200) {
						return uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
					}
					this.sss = 60
					this.codeInterval = setInterval(() => {
						if (this.sss === 0) {
							clearInterval(this.codeInterval)
							this.codeInterval = null
							return
						}
						this.sss--
					}, 1000)
					this.isSms = true
					uni.showToast({
						duration: 5000,
						title: '发送成功，请注意查收',
						icon: 'none'
					})
				})
			},
			async servicePriceQuery() {
				try {
					if (!this.formData.artistId || !this.formData.categoryId || !this.formData.duration) return
					if (this.isInfo) return
					uni.showLoading({
						title: '正在加载中'
					});

					//获取未使用的优惠券
					const couponRes = await postAllowCouponQuery({
						useState: 0
					})
					
					console.log(couponRes, '一个亿，，，，，，，，，，，，，');
					
					this.couponList = couponRes

					if (this.couponConsumeId && this.couponList && this.couponList.length > 0) {
						this.formData.couponConsumeId = this.couponConsumeId
						this.artistInfo.couponName = this.couponList.filter(c => c.id == this.couponConsumeId)[0]
							.couponName
					}

					//取消默认选中第一张
					// if (couponRes.length > 0 && couponRes[0].consumeId) {
					// 	this.couponConsumeId = couponRes[0].consumeId
					// 	this.formData.couponConsumeId = couponRes[0].consumeId
					// 	this.artistInfo.couponName = couponRes[0].couponName
					// }
					const res = await postServicePriceQuery({
						artistId: this.formData.artistId,
						categoryId: this.formData.categoryId,
						couponConsumeId: this.couponConsumeId,
						duration: this.formData.duration,
						cityCode: this.formData.cityCode
					})
					
					console.log(res, '两个一啦啦啦啦啦啦啦啦绿绿绿');

					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg
						})
					}
					if (res.data.tips) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.data.tips
						})
					}
					this.artistInfo.travelExpense = res.data.travelExpense
					this.artistInfo.serviceAmount = res.data.serviceAmount
					this.artistInfo.discountAmount = res.data.discountAmount
					this.artistInfo.payAmount = res.data.payAmount
				} catch ({
					message: title = '获取艺人价格失败'
				}) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				} finally {
					uni.hideLoading();
				}
			},
			//添加地址成功回调
			submitAddress(e) {
				if (e.address) {
					let str = e.address.split("市")
					e.address = str[str.length - 1]
					// e['cityName'] = str[0].split('省')[1]
				}
				this.formData.address = e.title + '·' + e.address

				console.log('添加调地址信息：', this.formData)
			},


			// 地址回显(编辑)调用此方法
			editAddress() {
				let obj = {
					id: '1',
					detailAddress: '', //门牌号(详细地址)
					userName: '', //联系人姓名
					userPhone: '', //手机号
					lableName: '', //标签
					sexType: '', //性别
					title: '', //地址概述
					address: '', //详细地址
					longitude: '', //经度
					latitude: '', //纬度
					agreeState: '', //是否是默认地址
				}
				this.$refs.liuChooseAddress.setData(obj)
			},







			handleSelect({
				value
			}, e) {
				if (e === 'duration') {
					this.formData.duration = value
				}

			},

			// 修改预约项目
			handleCategoryId(e) {
				console.log('12', e, this.formData);
				this.defaultIndex3 = e.indexs
				this.formData.categoryId = e.value[0].id
				this.formData.categoryName = e.value[0].title
				this.formData.unit = e.value[0].unit
				this.show3 = false
			},
			handleCityCode(e) {
				console.log('1');
				this.defaultIndex4 = e.indexs
				this.formData.cityCode = e.value[0].code
				this.formData.cityName = e.value[0].name
				this.show4 = false
			},
			async handleInit({
				duration,
			}) {
				try {
					if (this.isInfo) {
						uni.showLoading({
							title: '正在加载中'
						});
						getOrder(this.id).then(res => {
							Object.assign(this.formData, res)
							Object.assign(this.artistInfo, res)
						}).finally(() => {
							uni.hideLoading();
						})
						return
					}
					uni.showLoading({
						title: '正在加载中'
					});
					const {
						code,
						msg: title,
						data: artistInfo
					} = await postArtistDetail({
						id: this.formData.artistId + '',
						pageNum: 1,
						pageSize: 20
					})
					artistInfo.cates.forEach(res => {
						if (res.id === this.formData.categoryId) {
							this.formData.unit = res.unit
						}
					})


					// const {
					// 	data: hourList
					// } = await getDurationDownBox()

					if (code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title
						})
					}
					const {
						data: diamondList
					} = await getCateList()
					const {
						data: subscribeHours
					} = await getArtistSubscribe(this.formData.artistId)
					// this.hourList = hourList.map(i => ({
					// 	...i,
					// 	name: i.label
					// }))
					duration = !duration || duration < this.hourList[0].value ? this.hourList[0].value : duration
					let {
						cityName,
						cityCode,
						cates
					} = artistInfo
					cityName = cityName || this.AreaList[0].name
					cityCode = cityCode || this.AreaList[0].code
					Object.assign(this.artistInfo, artistInfo)

					setTimeout(() => {
						this.$nextTick(() => {

							let subscribeStartTime = Number(new Date()) + 60 * 60 * 1000 * 2
							const curDay = dayjs(new Date()).format('YYYY/MM/DD')
							const timeDay = dayjs(subscribeStartTime).format('YYYY/MM/DD')
							const timeHour = dayjs(subscribeStartTime).format('H')
							const timeMinute = dayjs(subscribeStartTime).format('m')
							const timeM = (timeHour - 0) * 60 + (timeMinute - 0)
							// let maxHour = 19,
							// 	maxMinute = 0,
							// 	minHour = 3,
							// 	minMinute = 40



							/* const {
								maxHour,
								maxMinute,
								minHour,
								minMinute
							} = this.$refs.timeRef
							const maxM = (maxHour - 0) * 60 + (maxMinute - 0)
							const minM = (minHour - 0) * 60 + (minMinute - 0)
							if (timeM <= maxM && timeM >= minM) {
								subscribeStartTime = dayjs(`${timeDay} 00:00:00`).valueOf() + timeM *
									1000 * 60
							} else {
								subscribeStartTime = dayjs(`${timeDay} 00:00:00`).valueOf() + (
									curDay === timeDay ? 0 : 0) + minM * 1000 * 60
								// subscribeStartTime = dayjs(`${timeDay} 00:00:00`).valueOf() + (
								// 	curDay === timeDay ?
								// 	(24 * 60 *
								// 		60 * 1000) :
								// 	0) + minM * 1000 * 60
							}
 */





							this.formData.subscribeStartTime = subscribeStartTime
							this.formData.subscribeStartTime1 = subscribeStartTime
							this.subscribeStartTime1 = subscribeStartTime

							let orderStartDateTime = Number(new Date(artistInfo.orderStartDateTime))
							this.formData.subscribeStartTime = orderStartDateTime
							this.formData.subscribeStartTime1 = Number(new Date())
							this.subscribeStartTime1 = orderStartDateTime

							// 预约时间为当前时间推后两小时
							let curTime = new Date();
							let addHour = curTime.setHours(curTime.getHours() + 2);
							this.formData.subscribeStartTime2 = addHour

							// 用ref设置时间选择器
							// this.$refs.dateRef.innerValue = orderStartDateTime
							// this.$refs.timeRef.innerValue = dayjs(orderStartDateTime).format('HH:mm')

						})
					}, 200)
					this.subscribeHours = subscribeHours
					this.diamondList = [diamondList]
					if (this.formData.categoryId) {
						this.formData.categoryName = cates.find(i => i.id == this.formData.categoryId)
							.title
					}
					this.artistInfo.cates = [cates]
					this.formData.duration = duration
					if (!this.isInfo) {
						this.formData.cityName = cityName
						this.formData.cityCode = cityCode
					}
				} catch ({
					message: title = '获取艺人详情信息失败'
				}) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				} finally {
					uni.hideLoading();
				}

			},
			async handleSubmit() {
				if (this.disableSubmit) return;
				let {
					address,
					cityCode,
					cityName,
					artistId,
					categoryId,
					categoryName,
					duration,
					payType,
					subscribeStartTime,
					subscribeStartTime1,
					subscribeStartTime2,
					salutation,
					contactPhone,
					remark,
					checkCode,
					couponConsumeId
				} = this.formData
				const {
					id: userId
				} = this.userInfo

				if (!subscribeStartTime1) return uni.showToast({
					duration: 5000,
					title: '请选择预约日期',
					icon: 'none'
				})
				else if (!subscribeStartTime2) return uni.showToast({
					duration: 5000,
					title: '请选择预约时间',
					icon: 'none'
				})
				else if (!duration) return uni.showToast({
					duration: 5000,
					title: '请选择预约时长',
					icon: 'none'
				})
				else if (!categoryId) return uni.showToast({
					duration: 5000,
					title: '请选择预约项目',
					icon: 'none'
				})
				else if (!salutation) return uni.showToast({
					duration: 5000,
					title: '请输入称呼',
					icon: 'none'
				})
				else if (!contactPhone) return uni.showToast({
					duration: 5000,
					title: '请输入联系手机号',
					icon: 'none'
				})
				else if (!validation.mobile(contactPhone)) return uni.showToast({
					duration: 5000,
					title: '请输入正确的手机号码',
					icon: 'none'
				})
				else if (contactPhone !== this.userInfo.phone && !this.isSms) return uni.showToast({
					duration: 5000,
					title: '请先获取验证码',
					icon: 'none'
				})
				else if (contactPhone !== this.userInfo.phone && checkCode.length !== 4) return uni.showToast({
					duration: 5000,
					title: '验证码请输入四位数',
					icon: 'none'
				})
				else if (!cityCode) return uni.showToast({
					duration: 5000,
					title: '请选择预约城市',
					icon: 'none'
				})
				else if (!address) return uni.showToast({
					duration: 5000,
					title: '请选择见面地址',
					icon: 'none'
				})
				if (!this.rechargType) return uni.showToast({
					duration: 5000,
					title: '请选择支付方式',
					icon: 'none'
				})



				this.disableSubmit = true
				subscribeStartTime = dayjs(subscribeStartTime1).format('YYYY-MM-DD ') + dayjs(subscribeStartTime2)
					.format('HH:mm:00')
				let params = {
					address,
					cityCode,
					cityName,
					artistId,
					categoryId,
					categoryName,
					duration,
					payType,
					salutation,
					contactPhone,
					subscribeStartTime: this.dateTimeData,
					//subscribeStartTime,
					userId,
					remark,
					couponConsumeId
				}
				if (contactPhone !== this.userInfo.phone && checkCode.length === 4) {
					params.checkCode = checkCode
				}

				// 推荐人id，没有就不传
				if (this.refereeId !== '') {
					params['refereeId'] = this.refereeId
				}

				//支付方式：0-余额；1-微信；2-支付宝 支付方式：0-余额；1-微信公众号，2-微信小程序
				if (this.rechargType == 'balance') {
					params.payType = 0
				} else if (this.rechargType == 'wx') {
					params.payType = 2
				}

				// 获取支付信息
				postOrderCreate(params).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '请求失败'
						})
						this.disableSubmit = false;
						return
					}
					if (this.rechargType == 'balance') {
						this.handlePay('success')
					}
					const payConfig = res.data.result.jsConfig

	
					// 小程序支付
					wxPaymentWeiXin({
						data: payConfig,
						successUrl : '/pages/order/index',
						errorUrl : '/pages/order/index',
					}, 1)

				})
				//提交后清空选择的优惠券ID
				cookie.remove("lockCoupon")
				this.consumeId = null
				this.disableSubmit = false;
			},

			// async balancePayFn(orderNo) {
			// 	const that = this
			// 	try {
			// 		uni.showLoading({
			// 			title: '正在加载中'
			// 		});
			// 		const res = await postPayOfBalance(orderNo)
			// 		const {
			// 			code,
			// 			data
			// 		} = res
			// 		if (res.code !== 200) {
			// 			that.handlePay('error')
			// 		}else if (res.code == 200) {
			// 			that.handlePay('success')
			// 		}
			// 		this.handleEnd()
			// 	} catch {
			// 		that.handlePay('error')
			// 	} finally {
			// 		uni.hideLoading();
			// 	}
			// },
			handleRechargType(e) {
				// this.rechargType = e
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.rechargTypeList.length; i++) {
					if (this.rechargTypeList[i].code === evt.detail.value) {
						this.current = i;
						this.rechargType = this.rechargTypeList[i].code;
						break;
					}
				}
			},
			handlePay(type) {
				if (type === 'success') {
					uni.showToast({
						duration: 2000,
						icon: 'none',
						title: '支付成功'
					})
					setTimeout(() => {
						this.$nextTick(() => {
							uni.reLaunch({
								url: '/pages/order/index'
							})
						})
					}, 1000)
				} else if (type === 'error') {
					uni.showToast({
						duration: 2000,
						icon: 'none',
						title: '支付失败，请重新支付'
					})
					setTimeout(() => {
						this.$nextTick(() => {
							uni.reLaunch({
								url: '/pages/order/index'
							})
						})
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.refereeIdInput {
		font-size: 28rpx;
	}

	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;
	}

	.place-order-box {
		position: absolute;
		width: 100%;
		top: 0;
		display: flex;
		flex-direction: column;
		padding: 32rpx 32rpx 32rpx 32rpx;
		box-sizing: border-box;

		.place-order-box-t {
			display: flex;
			align-items: center;

			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}

			.r-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;

				.box-t {
					display: flex;
					align-items: center;

					>text {
						color: #0F0D21;
						font-size: 40rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}

					&>view {
						height: 34rpx;
						line-height: 34rpx;
						background: rgba(236, 96, 111, 0.15);
						color: #EC606F;
						padding: 0 16rpx;
						border-radius: 8rpx;
						font-size: 18rpx;

						&>image {
							width: 16rpx;
							height: 16rpx;
							margin-right: 4rpx;
						}
					}
				}

				.box-b {
					color: #8C8A8A;
					font-size: 24rpx;
				}
			}
		}
	}

	.main-box {
		padding: 24rpx 40rpx;
		border-radius: 40rpx;
		background: #FFFFFF;
		margin-bottom: 32rpx;
		box-shadow: 0px 0px 16rpx 6rpx rgba(210, 211, 213, 0.5);

		.form-box {
			border-radius: 40rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.title {
				color: #0F0F0F;
				font-size: 32rpx;
				margin-bottom: 46rpx;
			}

			.btm-row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&>text {
					color: #0F0D21;
					font-size: 28rpx;


					&:last-child {
						color: #CF0000;
					}
				}

				.coupon {
					flex-grow: 1;
					display: flex;
					justify-content: flex-end;

					.coupon-name {
						&>text {
							font-size: 20rpx;
							padding: 0 15rpx;
							border-radius: 17rpx;
							color: #CF0000;
							left: 165rpx;
							margin-top: 5rpx;
							background-color: rgba(243, 48, 48, 0.1);
						}
					}

					.coupon-money {
						display: flex;
						justify-content: space-between;
						margin-bottom: 24rpx;
						color: #CF0000;
					}
				}



				.coupon-check {
					flex-grow: 1;
					display: flex;
					justify-content: flex-end;
					font-size: 20rpx;
					align-items: center;

					&>text {
						padding: 0 15rpx;
						border-radius: 17rpx;
						color: #CF0000;
						left: 165rpx;
						margin-top: 5rpx;
						background-color: rgba(243, 48, 48, 0.1);
					}

					&>image {
						width: 16rpx;
						height: 16rpx;
						top: 35%;
						// padding-top: 10rpx;
					}
				}
			}


			&>text {
				color: #0F0D21;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.form-item {
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.10);
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.text-box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				.text {
					color: #8C8A8A;
					font-size: 28rpx;
				}

				&>view {
					flex: 1;

					::v-deep .uni-input {
						color: #8C8A8A;
						font-size: 28rpx;
					}
				}

				&:last-child {
					border-bottom: 0;
				}

				&>text {
					width: 220rpx;
					color: #0F0D21;
					font-size: 28rpx;
					flex-shrink: 0;
				}

			}
		}

		::v-deep .uni-easyinput {
			height: 40rpx;
		}

		::v-deep .uni-easyinput__content {
			height: 40rpx;
		}

		::v-deep .uni-easyinput__content-input {
			height: 40rpx !important;
			padding-left: 0 !important;
		}

		.main-box-t {
			display: flex;
			justify-content: space-between;

			&>view {
				display: flex;
				align-items: center;
			}
		}

		.main-box-b {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				width: 295rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: rgba(140, 138, 138, 0.2);
				color: #8C8A8A;
				font-size: 28rpx;
				position: relative;
				overflow: hidden;

				&::before {
					position: absolute;
					top: 0;
					right: 0;
					width: 74rpx;
					height: 24rpx;
					line-height: 24rpx;
					border-radius: 0 10rpx 0 10rpx;
					color: #FFFFFF;
					background: #E27C8A;
					opacity: 0.7;
					font-size: 16rpx;
					content: '已预约';
				}
			}
		}
	}

	.btn-box {
		// position: fixed;
		// bottom: 32rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
		border-radius: 40rpx;
		color: #FDF3F3;
		font-size: 36rpx;
	}

	::v-deep uni-textarea {
		width: 100%;
		height: 100rpx;
		color: #8C8A8A;
		font-size: 28rpx;
	}

	.xxxxxx {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.btn {
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
			color: #fff;
			font-size: 22rpx;
			padding: 10rpx 20rpx;
			border-radius: 12rpx;
			flex-shrink: 0;
		}
	}

	.main-box-t1 {
		display: flex;
		flex-direction: column;

		&>view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	.recharg-box {
		display: flex;
		width: 682rpx;
		// height: 128rpx;
		// align-items: center;
		justify-content: space-between;

		.recharg-box-c {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: left;
			// justify-content: space-between;

			&>text {
				padding-right: 80rpx;
				font-size: 28rpx;
				color: #0F0D21;
			}

			&>image {
				width: 40rpx;
				height: 40rpx;
				padding-right: 20rpx;
				// left: 20rpx;
			}

			.type-bord {
				&::after {
					content: "";
					flex: 1 1;
					border-right: 3rpx solid #D9D9D9;
					margin: auto;
					padding-left: 60rpx;
				}
			}

			.radio {
				transform: scale(0.7);
			}

		}


		.item {
			// width: 208rpx;
			// height: 80rpx;
			line-height: 128rpx;
			text-align: left;
			color: #0F0D21;
			font-size: 32rpx;
			// justify-content: space-between;
			// border: 2rpx solid rgba(0, 0, 0, 0.1);
			// margin-right: 32rpx;


			&-s {
				color: #EC606F;
			}

			&-p {
				border: 2rpx solid #EC606F;
			}
		}
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50% !important;
		border-color: #D6D5D5 !important;
	}

	::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: #F7A254;
		background: #F7A254;
	}

	::v-deep .uni-checkbox-input.uni-checkbox-input-checked:before {
		color: #fff;
	}

	.btn-box2 {
		margin: 0 30rpx 30rpx 30rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
		border-radius: 40rpx;
		color: #FDF3F3;
		font-size: 36rpx;
		align-items: center;
	}
</style>